<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>10html폼요소</title>
	</head>
	<body>
		<h1>폼 요소</h1>
		<form action="login.jsp" method="post" name="frm01">
			<div>
				<label for="usrid"><b>아이디</b></label>
				<input type="text" name="usrid" id="usrid" />
			</div>
			<p>
				<label for="passwd"><b>비밀번호</b></label>
				<input type="password" name="passwd" id="passwd" />
			</p>
			<p>
				<input type="button" value="로그인" />
				<input type="submit" value="로그인" />
				<input type="reset" value="다시 입력" />
			</p>
		</form>
		<hr />
		<h1>회원가입</h1>
		<form action="" method="post" name="frm02">
			<p>
				<label for="userid"><b>아이디</b></label>
				<input type="text" name="userid" id="userid" />
			</p>
			<p>
				<label for="userpass"><b>비밀번호</b></label>
				<input type="password" name="userpass" id="userpass" />
			</p>
			<p>
				<label for="userrepass"><b>비밀번호 확인</b></label>
				<input type="password" name="userrepass" id="userrepass" />
			</p>
			<p>
				<label for="usename"><b>이름</b></label>
				<input type="text" name="usename" id="usename" />
			</p>
			<p>
				<input type="submit" value="입력완료"/>
				<input type="reset" value="다시입력"/>
			</p>
		</form>
		<hr />
		<form name="frm03">
			<p>
				<label for="content">본문내용</label>
				<textarea rows="7" cols="35" name="content" id="content"></textarea>
			</p>
		</form>
		<hr />
		<form name="frm04">
			<p>
				<label for="grade">학년(콤보박스)</label>
				<select name="grade" id="name">
					<option>학년을 선택하세요</option>
					<option value="1">1학년</option>
					<option value="2">2학년</option>
					<option value="3">3학년</option>
				</select>
			</p>
			<p>
				<label for="gender">성별(라디오버튼)</label>
				<input type="radio" name="gender" value="m" checked="checked"/>남자
				<input type="radio" name="gender" value="f" />여자
			</p>
			<p>
				<label for="hobby">취미(체크박스버튼)</label>
				<input type="checkbox" name="sports" id="sports" value="sports" checked="checked"/> 스포츠
				<input type="checkbox" name="game" id="game" value="game"/> 게임
				<input type="checkbox" name="fishing" id="fishing" value="fishing"/> 낚시
				<input type="checkbox" name="drive" id="drive" value="drive"/> 드라이브
			</p>
			<p>
				<label for="photo">사진등록</label>
				<input type="file" name="photo" id="photo" />
			</p>
			<p>
				<label>이미지버튼</label>
				<input type="image" src="images/icons/Alarm-green.ico"/>
			</p>
			<p>
				<input type="hidden" name="userno" value="12-456" />
			</p>
			<p>
				<button type="submit">입력완료</button>
				<button>입력완료</button>
				<button type="reset">입력완료</button>
			</p>
			</form>
			<hr />
			<form>
			<fieldset>
				<legend>세부 연락 정보</legend>
				<label>이메일</label>
					<input type="email" required="required"/>
					<br /><br />
					<input type="text" required="required" />@
					<select>
						<option>메일을 선택하세요</option>
						<option>naver.com</option>
						<option>google.co.kr</option>
					</select><br /><br />
				<label>핸드폰번호</label>
					<select>
						<option>010</option>
						<option>011</option>
						<option>016</option>
						<option>017</option>
						<option>018</option>
						<option>019</option>
					</select>&nbsp;-&nbsp;
					<input type="text" required="required"/>&nbsp;-&nbsp;
					<input type="text" required="required"/>
					<br /><br />
				<label>집전화</label>
					<select>
						<option>02</option>
						<option>031</option>
						<option>032</option>
						<option>051</option>
						<option>052</option>
					</select>&nbsp;-&nbsp;
					<input type="text" required="required"/>&nbsp;-&nbsp;
					<input type="text" required="required"/>
					<br /><br />
					<input type="submit" value="입력완료" />
			</fieldset>
		</form>
		<hr />
		<input type="text" name="uid" placeholder="아이디" /><br />
		<input type="password" name="pwd" placeholder="비밀번호" />
		<input type="date" name="birth" placeholder="생년월일"/>
		<!--
			form : 폼
			사용자 데이터 입력을 위한 html 양식을 의미
			사용자(클라이언트)와 서버가 대화할 수 있게 도와주는 도구
			
			form
			사용자가 입력해야 할 항목의 범위를 지정
			입력한 데이터를 서버로 전송하는 역할 담당
			action : 데이터 전송후 서버에서 처리할 페이지 이름을 지정
			method : 데이터 전송방식 지정(post/get)
			name : 폼 이름
			enctype : 전송할 데이터 인코딩 방식 지정
							  첨부기능을 구현하려면 "multipart/form-data" 로 설정
							  
		  	get 전송방식 (기본값)
		  	입력 데이터를 action 속성의 url 끝에 추가
		  	단순히 서버상의 데이터를 조회할 때 사용
		  	입력데이터 크기가 소량일때 사용
		  	
		  	post 전송방식
		  	입력 데이터를 HTTP 헤더에 추가
		  	전송해야 하는 데이터가 매우 크거나 민감한 데이터가 포함되어 외부에 보이면 안되는 경우, 파일 첨부시 사용
		  	자료 추가, 삭제, 수정할때 사용
		  	
		  	텍스트 입력
		  	input 태그를 이용해서 텍스트 정보 입력
		  	type 속성이 text면 한 줄의 문자열을 입력
		  	name 속성은 반드시 작성
		  	maxlength 속성은 입력가능 문자 수 제한
		  	size 속성은 입력 창의 크기 지정(사용X)
		  	
		  	type 속성이 password면 입력문자는 *로 마스크 처리됨
		  	입력 문자가 화면에서 가려지지만 데이터가 안전하게 서버로 전송되는 것은 아님
		  	SSL를 사용해서 통신하는 것을 추천
		  	
		  	type 속성이 radio면 선택항목에서 하나만 선택
		  	value 속성으로 항목을 선택하는 경우 서버로 전송할 값을 정의
		  	checked 속성을 이용해서 기본 선택항목을 정의
		  	
		  	type 속성이 checkbox면 선택항목에서 하나이상 선택
		  	그외 나머지는 radio와 동일함
		  	
		  	type 속성이 file이면 사용자가 파일을 업로드 가능
		  	파일 업로드시 method 속성에는 반드시 post 지정
		  	form 의 enctype 속성에 multipart/form-data도 지정해야 함
		  	
		  	type 속성이 submit이면 폼을 서버로 보내는데 사용
		  	type 속성이 reset이면 폼에 입력된 정보를 초기화
		  	type 속성이 button이면 단순한 버튼이 생성
		  	자바스크립트를 이용해서 다양한 이벤트를 처리하는데 사용할 수 있음
		  	
		  	type 속성이 image이면 전송버튼에 이미지 사용
		  	src 속성으로 버튼에 사용할 이미지 지정
		  	
		  	type 속성이 hidden이면 사용자가 볼 수 없는 폼에 값을 추가하여 서버로 전송 가능
		  	브라우저에는 아무것도 표시 되지 않음
		  	
		  	select 태그는 목록에서 하나를 선택하게 함
		  	선택 가능한 목록은 option 태그로 작성
		  	selected 속성을 이용해서 기본 선택항목을 정의
		  	size / multiple 속성을 추가하여 다중 선택이 가능한 드롭다운 버튼 작성할 수 있음
		  	
		  	폼 컨트롤에 레이블 붙이기
		  	폼 컨트롤에 제목을 나타내기 위해 각 컨트롤 앞에 단순 텍스트를 추가할 수도 있지만 시각장애인들을 위해 label 태그 사용
		  	label 태그에 설명과 폼 요소를 함께 포함하거나 label 태그에 for 속성을 이용해서 폼 요소를 지정
		  	for 속성값은 폼의 id 속성값과 일치해야 함
		  	
		  	폼 요소 그룹으로 묶기
		  	fieldset 태그로 특정 주제와 관련된 폼 컨트롤들을 그룹화할 수 있음 - 주위에 선이 생김
		  	legend 요소는 fieldset 태그의 목적을 나타내는 제목을 표시해 줌
		  	
		  	폼 유효성 검증 : HTML5
		  	폼 컨트롤에 올바른 내용이 입력되지 않으면 사용자에게 메시지를 띄우게 됨
		  	required 속성에 required 값을 지정
		  	유효성 검증은 클라이언트에서 먼저 수행하고 서버에서 나중에 수행하는 것이 좋음
		-->
	</body>
</html>